/**
 * 一次性任务时间选择器
 */
import React from 'react';
import { inject, observer } from 'mobx-react';
import { DatePicker, Form } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

@inject('TaskStore')
@observer
class OneTimePicker extends React.Component {
  // 日期时间变更
  handleDateTimeChange = (value) => {
    if (value) {
      this.props.TaskStore.handleChange('publishExecuteTime', value.format('YYYY-MM-DD HH:mm:ss'));
    } else {
      this.props.TaskStore.handleChange('publishExecuteTime', '');
    }
  }

  // 禁用过去的时间
  disabledDate = (current) => {
    return current && current < moment().startOf('day');
  }

  // 禁用过去的时间
  disabledTime = (date) => {
    if (date && date.isSame(moment(), 'day')) {
      return {
        disabledHours: () => Array.from(Array(moment().hour()).keys()),
        disabledMinutes: (h) => {
          if (h === moment().hour()) {
            return Array.from(Array(moment().minute()).keys());
          }
          return [];
        },
      };
    }
    return {};
  }

  render() {
    const { publishExecuteTime } = this.props.TaskStore;
    
    return (
      <div className="mt-15">
        <Form.Item label="执行时间">
          <DatePicker
            locale={locale}
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
            placeholder="选择执行时间"
            onChange={this.handleDateTimeChange}
            disabledDate={this.disabledDate}
            disabledTime={this.disabledTime}
            value={publishExecuteTime ? moment(publishExecuteTime) : null}
            style={{ width: '100%' }}
          />
        </Form.Item>
      </div>
    );
  }
}

export default OneTimePicker; 